<script setup lang="ts">

</script>

<template>
  <div class="homeView">
    <!-- 标题部分 -->
  <header id="header">
    <a id="logo" href="#">logo</a>
    <nav class="nav">
      <ul>
      <li>新闻</li>
      <li>新闻</li>
      <li>新闻</li>
      <li>新闻</li>
    </ul>
    </nav>
    <a id="menu-icon">&#8801;</a>
  </header>
  <!-- 内容部分 -->
 <section class="hero">
  <header class="hero-header">
    <h1 class="hero-title">Network and Application</h1>
    <!-- 人生是旷野，不是轨道 -->
  </header>
  <footer class="hero-footer">
    <a class="button button-primary" href="#">button one</a>
    <a class="button" href="#">button two</a>
  </footer>
</section>
<article>
  <h2>Some additional content</h2>
  <p>The rest of the page content continues below the hero. You can use the hero at the top of your page, e.g. the home page. A hero is great to display a high quality picture together with tasty title.</p>
  <p>Ad donec tincidunt torquent ultricies convallis sodales faucibus magna, fringilla lorem blandit sollicitudin donec faucibus curae orci molestie, et proin curae aliquet venenatis ligula amet vivamus orci varius arcu.</p>
  <p>Laoreet fusce condimentum venenatis quisque imperdiet ornare cras faucibus convallis, pharetra habitasse elementum ut bibendum per sociosqu phasellus etiam, velit faucibus integer torquent leo elementum maecenas netus.</p>
</article>
  </div>
</template>

<style scoped>
/* general */

body {
	font-family: 'PT Sans Caption',"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 3vh;
}
.homeView{
  position: relative;
}

/* header */

#header {
	display: flex;
	justify-content: space-between; 
	align-items: center;
  width: 100%;
  height: 8em;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
 
}
.nav ul li{
  float: left;
  padding: 4em;
}

#logo {
  text-decoration: none;
  color: black;
  font-size: 5vh;
  font-weight: bold;
}
	
#menu-icon {
  font-family: Geneva, sans-serif;
  font-size: 6vh;
}
	
/* hero */

.hero {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
	padding: 1em;
	box-sizing: border-box;
	color: white;
	background: url(https://images.unsplash.com/photo-1500417148159-68083bd7333a) center center no-repeat;
	background-size: cover;
}

.hero-title {
	max-width: 17em;
	margin-top: 5em;
	font-size: 12em;
  text-align: center;
	font-weight: bold;
	line-height: .9;
}
	
	@media only screen and (min-width: 32em) { .hero-title { font-size: 12vh; } }	

.hero-footer {
	display: flex;
	margin-bottom: 1em;
}

.button {
	padding: .5em .67em;
	color: white;
	text-decoration: none;
	border: .1em solid white;

}
	
	.button-primary {
		color: black;
		background-color: white;
	}
	
/* article */

article {
	max-width: 36em;
	margin: 0 auto;
	padding: 1em;
}	
</style>